<template>
	<view class="content">
		<view class="dangyuan-describe">
			<customNavbar title="信息详情"></customNavbar>
			<view class="top-detail-info">
				<image v-if=" memberInfo.xb === '1'" class="touxiang" src="../../static/images/zhishuo/touxiang.png"></image>
				<image v-if=" memberInfo.xb === '2'" class="touxiang" src="../../static/images/zhishuo/nvtouxiang.png"></image>
				<view class="touxiang-content">
					<view class="top-name-content">
						<view class="top-name">{{ memberInfo.xm }}</view>
						<image v-if=" memberInfo.xb === '1'" class="sex-icon-size"
							src="../../static/images/zhishuo/nan.png"></image>
						<image v-if=" memberInfo.xb === '2'" class="sex-icon-size"
							src="../../static/images/zhishuo/nv.png"></image>
					</view>
					<view class="djbh">党籍编号：{{ memberInfo.djbh }}</view>
				</view>
			</view>

			<view class="middle-content">
				<view class="middle-sex-content">
					<view class="middle-sex-title">性别</view>
					<view class="middle-sex">{{ getDictLabel('XB', memberInfo.xb) }}</view>
				</view>
				<view class="underline"></view>
				<view class="middle-zhongzu-content">
					<view class="middle-zhongzu-title">民族</view>
					<view class="middle-zhongzu">{{ getDictLabel('MZ', memberInfo.mz) }}</view>
				</view>
				<view class="underline"></view>
				<view class="middle-age-content">
					<view class="middle-age-title">年龄</view>
					<view class="middle-age">{{ memberInfo.nl }}</view>
				</view>
				<view class="underline"></view>
				<view class="middle-time-content">
					<view class="middle-time-title">入民革时间</view>
					<view class="middle-time">{{ memberInfo.rmgsj }}</view>
				</view>
			</view>
			<image style="width: vw(686);height:vw(4);position: absolute;left: 11.5%;"
				src="../../static/images/zhishuo/xuxian.png" mode="widthFix"></image>
			<view class="bottom-content">
				<view class="main-bottom-content">
					<view class="bottom-content-one">
						<view class="bottom-content-two">籍贯</view>
						<view class="bottom-content-three">
							{{ getDictLabel('XZQH',memberInfo.jg) === '' ? memberInfo.jg : getDictLabel('XZQH',memberInfo.jg) }}
						</view>
					</view>
					<view class="bottom-content-one">
						<view class="bottom-content-two">最高学历</view>
						<view>{{ getDictLabel('XL', memberInfo.zgxl) }}</view>
					</view>
					<view class="bottom-content-one">
						<view class="bottom-content-two">党籍编号</view>
						<view>{{ memberInfo.djbh }}</view>
					</view>
					<view class="bottom-content-one">
						<view class="bottom-content-two">委员会</view>
						<view>{{ memberInfo.wyh }}</view>
					</view>
					<view class="bottom-content-one">
						<view class="bottom-content-two">基层组织</view>
						<view>{{ memberInfo.jczz }}</view>
					</view>
					<view class="bottom-content-one">
						<view class="bottom-content-two">出生年月</view>
						<view>{{ memberInfo.csrq }}</view>
					</view>
					<view class="bottom-content-one">
						<view class="bottom-content-two">最高学历毕业学校</view>
						<view>{{ memberInfo.zgxlbyxx }}</view>
					</view>
					<view class="bottom-content-one">
						<view class="bottom-content-two">最高学位</view>
						<view v-if="memberInfo.zgxw">
							{{ getDictLabel('XW',memberInfo.zgxw) === '' ? memberInfo.zgxw : getDictLabel('XW',memberInfo.zgxw) }}
						</view>
						<view v-else></view>
					</view>

					<view class="bottom-content-one">
						<view class="bottom-content-two">职称</view>
						<view>{{ memberInfo.zc }}</view>
					</view>
					<view class="bottom-content-one">
						<view class="bottom-content-two">职称级别</view>
						<view v-if="memberInfo.zcjb">
							{{ getDictLabel('ZCJB',memberInfo.zcjb) === '' ? memberInfo.zcjb : getDictLabel('ZCJB',memberInfo.zcjb) }}
						</view>
						<view v-else>

						</view>
					</view>
					<view class="bottom-content-one">
						<view class="bottom-content-two">参加工作时间</view>
						<view>{{ memberInfo.cjgzsj }}</view>
					</view>
					<view class="bottom-content-one">
						<view class="bottom-content-two">民革特色</view>
						<view>{{memberInfo.mgts}}</view>
					</view>
					<view class="bottom-content-one">
						<view class="bottom-content-two">界别</view>
						<view>{{ memberInfo.jb }}</view>
					</view>
					<view class="bottom-content-one">
						<view class="bottom-content-two">中上层人士</view>
						<view v-if="memberInfo.zscrs === true">是</view>
						<view v-else>否</view>
					</view>
					<view class="bottom-content-one">
						<view class="bottom-content-two">联系方式</view>
						<view>{{ memberInfo.sj }}</view>
					</view>

				</view>

			</view>
			<image style="width: vw(686);height:vw(4);position: absolute;left: 11.5%;"
				src="../../static/images/zhishuo/xuxian.png" mode="widthFix"></image>
			<view class="zhankai-bottom">
				<view>
					<view class="bottom-content-two">工作单位及职务</view>
					<view style="color: #666666;">{{ memberInfo.gzdw }}{{ memberInfo.zw }}</view>

				</view>

				<view>
					<view class="bottom-content-two">民革现任职务</view>
					<view style="color: #666666;">{{ memberInfo.mgxrzw }}</view>
				</view>

				<view>
					<view class="bottom-content-two">人大政协现任职务</view>
					<view style="color: #666666;">{{ memberInfo.rdzxxrzw }}</view>

				</view>

				<view>
					<view class="bottom-content-two">社会兼职</view>
					<view style="color: #666666;">{{ memberInfo.shjz }}</view>

				</view>

			</view>

		</view>
	</view>
</template>

<script>
	import {
		partyMemberHomeInfo
	} from '../../api';

	export default {
		data() {
			return {
				toDetailInfo: '',
				id: '',
				memberInfo: {},

			}
		},

		onLoad(option) {
			this.id = option.id;
		},
		onShow() {
			this.getMemberInfo()
		},

		methods: {
			getMemberInfo() {
				this.handlerLoading = true
				partyMemberHomeInfo({
					id: this.id
				}).then(res => {
					console.log(res);
					if (res.errors.length > 0) {
						uni.showToast({
							title: res.errors,
							icon: 'none',
							duration: 2000,
						});
					} else {

						this.memberInfo = res.data;


					}

				}).catch(err => {

					this.$common.errorToShow(err)
					this.handlerLoading = false;
				})
			},

			getDictLabel(dictName, code) {
				let data = uni.getStorageSync('dictData');
				let dataList = JSON.parse(data)
				const type = dataList.filter((element) => (element.dictName === dictName))
				if (type) {
					const val = type.find((element) => (element.code === code))
					if (val) {
						return val.name
					} else {
						return ''
					}
				} else {
					return ''
				}

			},




		}
	}
</script>

<style lang="scss" scoped>
	.quanwen {
		color: #5da6ff;
		cursor: pointer;
		font-weight: bold;
	}

	.content {
		height: 100%;
		width: 100%;
		background-color: #F9F9F9;
		overflow-y: scroll;

		.dangyuan-describe {
			position: relative;
			width: 100%;
			height: vw(816);
			background-size: cover;
			background-image: url('');

			.top-detail-info {
				width: vw(680);
				height: vw(140);
				margin: vw(50) auto vw(54);
				display: flex;
				align-items: center;

				.touxiang {
					width: vw(120);
					height: vw(120);
				}

				.touxiang-content {
					margin-left: vw(30);

					.top-name-content {
						display: flex;
						align-items: center;
						margin-bottom: vw(30);

						.top-name {

							font-size: vw(32);
							font-family: PingFang SC, PingFang SC-Semibold;
							font-weight: bold;
							text-align: left;
							color: #ffffff;
							margin-right: vw(12);



						}

						.sex-icon-size {
							width: vw(20);
							height: vw(32);
						}
					}

					.djbh {

						width: vw(310);
						height: vw(34);
						background-size: cover;
						background-image: url('');
						font-size: vw(24);
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: Regular;
						text-align: center;
						color: #ffffff;
					}
				}
			}

			.middle-content {
				background-image: url('');
				width: vw(686);
				height: vw(188);
				margin: 0 auto;
				display: flex;
				justify-content: space-evenly;
				align-items: center;
				background-size: cover;

				.middle-sex-content {
					text-align: center;
					line-height: 2;

					.middle-sex-title {
						font-size: vw(32);
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: Regular;
						color: #333333;

					}

					.middle-sex {

						font-size: vw(32);
						font-family: PingFang SC, PingFang SC-Semibold;
						font-weight: bold;
						color: #2c93ff;
					}
				}

				.underline {
					height: vw(108);
					width: vw(2);
					background-color: #D3EDFF;
				}

				.middle-zhongzu-content {
					text-align: center;
					line-height: 2;

					.middle-zhongzu-title {
						font-size: vw(32);
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: Regular;
						color: #333333;

					}

					.middle-zhongzu {

						font-size: vw(32);
						font-family: PingFang SC, PingFang SC-Semibold;
						font-weight: bold;
						color: #2c93ff;
					}
				}

				.middle-age-content {
					text-align: center;
					line-height: 2;

					.middle-age-title {
						font-size: vw(32);
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: Regular;
						color: #333333;

					}

					.middle-age {

						font-size: vw(32);
						font-family: PingFang SC, PingFang SC-Semibold;
						font-weight: bold;
						color: #2c93ff;
					}
				}

				.middle-time-content {
					text-align: center;
					line-height: 2;

					.middle-time-title {
						font-size: vw(32);
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: Regular;
						color: #333333;

					}

					.middle-time {

						font-size: vw(32);
						font-family: PingFang SC, PingFang SC-Semibold;
						font-weight: bold;
						color: #2c93ff;
					}
				}
			}

			.bottom-content {
				width: vw(686);
				min-height: vw(950);
				background-color: #ffffff;
				border-radius: vw(20);
				margin: 0 auto;
				// border-top: 2px dashed #D3EDFF;
				// border-bottom: 2px dashed #D3EDFF;
				display: flex;

				.main-bottom-content {

					width: 100%;
					height: 100%;
					line-height: 2;
					margin: vw(20) 0;

					.bottom-content-one {
						display: flex;
						justify-content: space-between;
						padding: vw(6) vw(20);

						.bottom-content-two {
							font-weight: bold;
							color: #666666;
						}



					}
				}


			}

			.zhankai-bottom {
				width: vw(686);
				min-height: vw(600);
				background-color: #ffffff;
				border-radius: vw(20);
				margin: 0 auto;
				// border-bottom: 3px dashed #D3EDFF;
				// display: flex;
				line-height: 2;
				padding: vw(30) vw(20);


				.bottom-content-two {
					font-weight: bold;
					color: #666666;
				}

			}


		}
	}
</style>
